<template>
	<view class="container">
		<view class="page_top">
			<!-- 页面标题 -->
			<head-view :leftTitle='leftTitle' :rightTitle="rightTitle" @select="selectType" />
			<!-- 选择区域 -->
			<view class="if-box display-flex">
				<view class="address-select">
					<view @click="openPopup()">{{checkedArea.value?checkedArea.label:'配送小区'}}</view>
					<image src="/static/icon_arrow_down.png" @click="openpopup" />
				</view>
				<view class="address-select">
					<view class="value" @click="onDate">{{date&&date.length>0?date[0]:'配送日期'}}</view>
					<image src="/static/icon_arrow_down.png" @click="onDate" />
				</view>
				<view class="address-select">
					<view class="value" @click="onTime()">{{time.value?time.label:'配送时间'}}</view>
					<image src="/static/icon_arrow_down.png" @click="onTime" />
				</view>
			</view>

			<!-- 搜索框 -->
			<input-select @search="searchdeviceName" />
		</view>
		<scroll-view class="page-content" :refresher-enabled="false" :scroll-top="0" scroll-y="true"
			@scrolltolower='scrollBottom'>
			<card-view :data="cardData1" title='' :column='cardData1.length' v-if="cardData1.length>0" />
			<view class="list-box" v-if="!isEmpty">
				<devide-item :data="item" :date="date[0]" v-for="(item,index) in list" :key="index"
					@onRefresh="onRefresh" />
			</view>
			<view class="empty" v-else>
				<image src="../../static/nodata.png" mode=""></image>
				<view>暂无数据</view>
			</view>
		</scroll-view>
		<uni-popup ref="popup" type="bottom">
			<view class="popupView">
				<view class="title">
					选择配送小区
					<image src="/static/icon_close.png" @click="closePopup" />
				</view>
				<!-- 搜索框 -->
				<input-select placeholder="请输入配送小区名称" @search="searchAreaName" />
				<view class="list">
					<view :class="item.id == selectedArea.id && 'active'" v-for="(item, index) in areaList"
						@click="clickListItem(item)" :key="index">{{item.label}}</view>
				</view>
				<view class="popup_btn" @click="confirmPopup">确认</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupTime" type="bottom">
			<view class="popupView">
				<view class="title">
					选择配送时间
					<image src="/static/icon_close.png" @click="closePopup" />
				</view>
				<view class="list">
					<view class="item" :class="item.id == selected.id && 'active'" v-for="(item, index) in timeList"
						@click="clickListItemTime(item)" :key="index">{{item.label}}
						<!-- <image class="icon-yes" src="/static/icon_yes.png" v-if="item.id == selected.id" /> -->
					</view>
				</view>
				<view class="popup_btn" @click="confirmPopupTime">确认</view>
			</view>
		</uni-popup>
		<uni-calendar ref="calendar" :date="date[0]" :insert="false" @confirm="change" />
		<!-- <up-calendar :show="showCalendar" mode="single" :minDate="minDate" :defaultDate="defaultDate"
			@confirm="change"></up -->-calendar>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch,
		onMounted
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReachBottom,
	} from '@dcloudio/uni-app'
	import dayjs from 'dayjs';
	import headView from './headView.vue'
	import inputSelect from './inputSelect.vue'
	import devideItem from './deviceItem.vue'
	import cardView from './cardView.vue'
	// 标题左侧菜单
	const leftTitle = ref({
		type: 'text',
		title: '今日配送'
	})
	// 标题右侧菜单
	const rightTitle = ref({
		type: 'tab',
		// 选中下标
		tabIndex: 0,
		width: 300,
		// 列表
		tabList: [{
			label: '全部',
			value: ''
		}, {
			label: '未送达',
			value: '1'
		}, {
			label: '已送达',
			value: '2'
		}]
	})
	const popup = ref()
	const checkedArea = ref({})
	const selectedArea = ref({})
	// 小区列表
	const areaList = ref([])

	const date = ref([dayjs().format('YYYY-MM-DD')])
	const time = ref('')
	const showCalendar = ref(false)
	const minDate = dayjs().subtract(1, 'year').format('YYYY-MM-DD')
	const maxDate = dayjs().format('YYYY-MM-DD')
	const defaultDate = dayjs().format('YYYY-MM-DD')
	// 选择配送时间弹框-时间列表
	const timeList = ref([])
	// 选择配送时间弹框-dom对象
	const popupTime = ref()
	// 选择配送时间弹框-选中
	const selected = ref({})
	// 选择配送时间弹框-dom对象
	const calendar = ref()

	const cardData1 = ref([])

	const list = ref([])
	const pageIndex = ref(1) //当前页
	const devName = ref('') //搜索栏-设备名称
	const areaName = ref('') //搜索栏-设备名称
	const isEmpty = ref(false)
	// const title = ref('') //区分是 水表监控/电表监控
	// 控制开关（下拉刷新、上拉加载）
	let isLoading = false
	// 已经是最后一页（通过返回数据计算）
	let isEndPage = false
	onShow(() => {
		getPageList()
	})
	onLoad((option) => {
		console.log('组件已经挂载')
		getAreaList()
		getTimeList()
	})
	onMounted(() => {
		
	})
	const getTimeList = (code) => {
		getApp().globalData.serviceApi({
			"dictType": "time",
		}, 'getDictData', 'POST').then(res => {
			res.data = [{
				label: '全部',
				value: ''
			}, ...res.data]
			timeList.value = res.data

		})
	}
	const onDate = () => {
		calendar.value.open();
		// showCalendar.value = true
	}
	const change = (e) => {
		console.log(e);
		date.value = [e.fulldate]
		// showCalendar.value = false
		pageIndex.value = 1
		list.value = []
		getPageList()
	}
	// 选择配送时间-打开弹框
	const onTime = () => {
		popupTime.value.open()
	}
	// 选择配送时间-选择数据
	const clickListItemTime = (item) => {
		selected.value = item
	}
	// 选择配送时间-确定
	const confirmPopupTime = () => {
		console.log(selected.value)
		time.value = selected.value
		popupTime.value.close()
		pageIndex.value = 1
		list.value = []
		getPageList()
	}
	// 关闭所有弹框
	const closePopup = () => {
		popup.value.close()
		popupTime.value.close()
		showCalendar.value = false
	}
	const scrollBottom = () => {
		console.log('*******触底了*******');
		if (isLoading) return
		if (isEndPage) {
			uni.showToast({
				icon: 'none',
				title: '没有更多了'
			})
			return
		}
		pageIndex.value++
		getPageList()
	}
	// 获取小区
	const getAreaList = () => {
		getApp().globalData.serviceApi({
			"dictType": "address",
			dictLabel: areaName.value
		}, 'getDictData', 'POST').then(res => {
			if (!areaName.value) {
				res.data = [{
					label: '全部',
					value: ''
				}, ...res.data]
			}
			areaList.value = res.data
			checkedArea.value = areaList.value[0]
			getPageList()
		})
	}
	const searchAreaName = (name) => {
		areaName.value = name
		getAreaList()
	}
	// 选择小区
	const clickListItem = (item) => {
		selectedArea.value = item
	}
	// 打开选择小区弹框
	const openPopup = () => {
		selectedArea.value = JSON.parse(JSON.stringify(checkedArea.value))
		popup.value.open()
	}
	// 点击选择小区弹框确认
	const confirmPopup = () => {
		checkedArea.value = JSON.parse(JSON.stringify(selectedArea.value))
		popup.value.close()
		pageIndex.value = 1
		list.value = []
		getPageList()
	}
	const onRefresh = () => {
		pageIndex.value = 1
		list.value = []
		getPageList()
	}
	const getPageList = () => {
		isLoading = true
		uni.showLoading({
			title: '正在加载',
			mask: true
		})
		const params = {
			pageSize: 10,
			page: pageIndex.value,
			//区域id
			addressCode: checkedArea.value.value,
			status: rightTitle.value.tabList[rightTitle.value.tabIndex].value, //全部时 为空
			name: devName.value, //设备名称
			date: date.value[0],
			time: time.value.value
		}

		console.log('params', params)
		getApp().globalData.serviceApi(params, 'getServedPage', "POST").then(res => {
			uni.hideLoading()
			if (!res.data || res.data.total == 0) {
				isEmpty.value = true
				cardData1.value = []
			} else {
				// res.data.statis = [{
				// 	typeName: "纯奶",
				// 	count: '21'
				// }, {
				// 	typeName: "纯奶",
				// 	count: '21'
				// }, {
				// 	typeName: "纯奶",
				// 	count: '21'
				// }]
				res.data.statis.forEach(item => {
					item.label = item.typeName
					item.num = item.count
				})
				cardData1.value = res.data.statis
				isEmpty.value = false
				isEndPage = pageIndex.value * 10 >= res.data.total
				list.value = []
				list.value = [...list.value, ...res.data.list]
				console.log('list', list.value);
			}
		}).catch(error => {
			pageIndex.value > 1 ? pageIndex.value-- : 1
			uni.hideLoading()
			uni.showToast({
				icon: 'none',
				title: error.message
			})
			console.log(error)
		}).finally(() => {
			isLoading = false
			uni.hideLoading()
		})
	}
	const selectType = (type) => {
		console.log('type', type);
		rightTitle.value.tabIndex = type
		console.log('tabIndex', rightTitle.value.tabIndex);
		pageIndex.value = 1
		list.value = []
		getPageList()
	}
	const selectAddress = (selectRoom) => {
		console.log('selectRoom', selectRoom);
		if (!selectRoom) {
			isEmpty.value = true
			return
		}
		checkedArea.value = selectRoom
		pageIndex.value = 1
		list.value = []
		getPageList()
	}

	const searchdeviceName = (deviceName) => {
		devName.value = deviceName
		pageIndex.value = 1
		list.value = []
		getPageList()
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;

		.page_top {
			// height: 372rpx;
			height: 314rpx;
			box-sizing: border-box;
			padding: 0 32rpx;

			.address-select {
				display: flex;
				align-items: center;
				margin-bottom: 38rpx;

				&>view {
					color: #929394;
					font-size: 28rpx;
					margin-right: 8rpx;
				}

				&>image {
					width: 28rpx;
					height: 28rpx;
					flex-shrink: 0;
				}
			}

			.search {
				width: 100%;
				height: 80rpx;
				background: #F5F5F5;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #929394;
				padding-left: 32rpx;
				margin-bottom: 40rpx;
				box-sizing: border-box;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 16rpx;
				}
			}

			.operate {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 10rpx;
				padding-bottom: 20rpx;
				font-size: 28rpx;

				.closeText {
					color: #206AFF;
				}

				.batch {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #206AFF;

					image {
						width: 28rpx;
						height: 28rpx;
						margin-right: 8rpx;
					}
				}

				.dis_batch {
					// color: #222;
					opacity: 0.4;
				}

				.record {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #5C646E;

					image {
						width: 28rpx;
						height: 28rpx;
						margin-right: 8rpx;
					}
				}
			}

			.end {
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
		}

		.page-content {
			width: 100%;
			flex: 1 auto;
			overflow: auto;
			// padding: 0 32rpx;
			// padding-bottom: 30rpx;
			// box-sizing: border-box;
			background: #F9FAFC;
			padding-top: 32rpx;

			.list-box {
				padding-top: 20rpx;
				padding-bottom: 20rpx;
			}

			.item-label {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
			}
		}

		.page_bottom {
			padding: 24rpx 0;
			height: 136rapx;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 14rpx 0rpx rgba(0, 0, 0, 0.05);
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;

			.btn {
				width: 40%;
				height: 88rpx;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;

			}

			.btn_open {
				border: 2rpx solid #206AFF;
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #206AFF;
				margin-right: 30rpx;
			}

			.btn_close {
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				background: #206AFF;
			}
		}

		.bgcolor {
			background: #F9FAFC;
			padding: 0rpx;
			padding-top: 32rpx;
		}

		.popupView {
			background-color: #ffffff;
			padding: 0 48rpx;
			border-radius: 16rpx 16rpx 0 0;
			display: flex;
			flex-direction: column;
			padding-bottom: 50rpx;

			.title {
				position: relative;
				// height: 50rpx;
				line-height: 120rpx;
				text-align: center;
				color: #2F3338;
				font-size: 32rpx;
				font-weight: bold;

				&>image {
					position: absolute;
					top: 44rpx;
					right: 0;
					width: 32rpx;
					height: 32rpx;
				}
			}

			.list {
				max-height: 600rpx;
				overflow-y: scroll;
				margin-bottom: 40rpx;

				&>view {
					position: relative;
					height: 100rpx;
					line-height: 100rpx;
					color: #2F3338;
					font-size: 32rpx;

					&.active {
						&::after {
							content: '';
							position: absolute;
							top: 32rpx;
							right: 0;
							width: 48rpx;
							height: 48rpx;
							background-image: url('/static/icon_yes.png');
							background-size: 100% 100%;
							background-repeat: no-repeat;
						}
					}
				}
			}

			.popup_btn {
				width: 100%;
				height: 88rpx;
				background: linear-gradient(90deg, #175DFF 0%, #2977FF 100%);
				box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(23, 93, 255, 0.3);
				border-radius: 8rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	::v-deep .status-box .segmented-control__item {
		flex: none;
		padding: 0 20rpx;
	}

	::v-deep .uni-modal__textarea {
		background: #F9FAFC;
		border-radius: 8rpx;
		font-size: 32rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #9DA0A3;
		margin-bottom: 50rpx;
		margin-top: 34rpx;
	}

	::v-deep .uni-modal {
		border-radius: 16rpx;
	}

	.empty {
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #666666;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-top: 100rpx;
		// margin-top: 100rpx;

		image {
			width: 256rpx;
			height: 196rpx;
			margin-bottom: 40rpx;
		}
	}

	::v-deep .uni-toast {
		width: 350rpx;
	}

	.batch-operation-dialog {

		::v-deep .uni-popup__wrapper {
			width: calc((100% - 120rpx));
		}

		.content {
			position: relative;
			background-color: #fff;
			border-radius: 10rpx;

			.icon-close {
				position: absolute;
				right: 0;
				top: 0;
				width: 32rpx;
				height: 32rpx;
				padding: 10px;
			}

			.content-box {
				padding: 50rpx 30rpx 50rpx;
				box-sizing: border-box;
				text-align: center;

				.chart-box {
					height: 196rpx;
					margin-bottom: 28rpx;
				}

				.icon-status {
					width: 128rpx;
					height: 128rpx;
				}

				.title {
					font-size: 36rpx;
					color: #060607;
					margin: 38rpx 0 16rpx;
				}

				.tip {
					font-size: 26rpx;
					color: #999999;
					line-height: 36rpx;
				}
			}
		}
	}
</style>